<template>
	<div class="comment_placeholder">
		<div class="comment_cover" v-show="isActive" @click="isActive = false"></div>
		<div class="comment">
			<!-- 形态1  简单的展示 -->
			<div class="type1" v-show="!isActive">
				<input class="input" type="text" placeholder="写跟帖" @focus="isActive = true" v-model.trim="content" />

				<router-link class="icon" :to="'/reply/?id=' + postDetail.id">
					<i class="iconfont iconpinglun-"></i>
					<em>{{ postDetail.comment_length }}</em>
				</router-link>

				<span class="icon" @click="collectfn">
					<i class="iconfont iconshoucang" :class="{star: postDetail.has_star}"></i>
				</span>
				<span class="icon">
					<i class="iconfont iconfenxiang"></i>
				</span>
			</div>
			<!-- 形态2  文本域，用户可以输入 -->

			<div class="type2" v-show="isActive">
				<!-- Vant 也有组件 -->
				<textarea v-gfocus class="textarea" placeholder="回复:" v-model.trim="content"></textarea>
				<div class="btn-group">
					<span class="btn" @click="sendfn">发送</span>
					<span class="btn" @click="(isActive = false), (content = '')">取消</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {collectarticleAPI, publishPostCommentAPI} from "@/apis/News";
export default {
	props: {
		postDetail: Object,
		commentobj: Object,
	},
	data() {
		return {
			isActive: false,
			content: "",
		};
	},
	watch: {
		commentobj: {
			deep: true,
			handler() {
				// 如果有被回复的评论
				if (this.commentobj) this.content = "@" + this.commentobj.user.nickname + " "; // 在文本域中添加 @用户昵称
			},
		},
		content() {
			// 如果用户清空了，就变成回复文章，父组件把 temp=null
			if (this.content.length === 0) this.$emit("reset");
		},
	},
	methods: {
		async collectfn() {
			// 调用接口
			const res = await collectarticleAPI(this.postDetail.id);
			console.log(res.data);
			// 更新页面绑定的类名
			this.postDetail.has_star = !this.postDetail.has_star;

			// 提示操作状态
			if (this.postDetail.has_star) {
				this.$toast("收藏成功");
			} else {
				this.$toast("取消收藏");
			}
		},
		// 输入框获取焦点时，变成文本域(形态2)
		//     <textarea
		//     class="textarea"
		//     placeholder="回复: @火星网友"
		//     ref="textarea"
		//   ></textarea>
		//原生写法 ref="textarea"
		inputFn() {
			// 显示文本域
			this.isActive = true;
			// console.log(this.$refs.textarea);
			// 需要等待视图更新后，才能获取到焦点
			// this.$nextTick(() => {
			// 	this.$refs.textarea.focus();
			// });
		},
		// 点击发送按钮 - 评论当前文章
		async sendfn() {
			if (this.content.length === 0) return this.$toast("回复内容不能为空");
			// 调用发表评论的接口
			const res = await publishPostCommentAPI(this.postDetail.id, {
				content: this.content,
				parent_id: this.commentobj && this.commentobj.id,
				// 两种情况：情况1：回复某个评论(有评论id)      情况2：直接回复文章(没有评论id)
			});
			// console.log(res.data);
			this.$toast(res.data.message); // 发表成功后的提示
			this.content = ""; // 清空文本域
			this.isActive = false; // 切换回形态1
			this.$emit("refresh"); // 由于评论列表的数据是在父组件上，子传父
		},
	},
};
</script>

<style lang="less" scoped>
//比如在用vue路由的时候，想要选中的当前路由文字颜色与未选中的颜色不一样，由于router-link里面用的是a标签，所以设置路由之后文字样式是a标签的默认样式，所以需要取消a标签的默认颜色，让其继承父元素设置的颜色只要使用inherit这个属性
// 小技巧  color: inherit;
// 点击输入框以外的区域可以关闭输入框的小技巧
.comment_cover {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
// 定位的父盒子负责占位置, 不然定位的内容会覆盖内容
.comment_placeholder {
	height: 100px;
}
.comment {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #f2f2f2;
	z-index: 11;
}
.star {
	color: red;
}
.type1 {
	display: flex;
	height: 50px;
	align-items: center;
	padding: 0 10px;
	.input {
		flex: 1;
		height: 30px;
		border-radius: 15px;
		background-color: #d7d7d7;
		border: none;
		padding: 0 10px;
		margin: 10px;
	}
	.icon {
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		em {
			position: absolute;
			top: 0;
			right: 0;
			background-color: red;
			height: 16px;
			line-height: 16px;
			border-radius: 8px;
			font-size: 14px;
			width: 20px;
			text-align: center;
			color: #fff;
		}
	}
}
.type2 {
	display: flex;
	padding: 10px;
	.textarea {
		height: 80px;
		background-color: #d7d7d7;
		border-radius: 5px;
		flex: 1;
		padding: 5px;
	}

	.btn-group {
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		.btn {
			width: 60px;
			height: 25px;
			background-color: red;
			color: #fff;
			border-radius: 100px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
